import { connect } from 'dva-no-router'
import React, { Component } from 'react'
import { back } from '../utils/navigation'
import { Text, Dimensions, FlatList, StyleSheet, View, StatusBar, TouchableWithoutFeedback, PixelRatio } from 'react-native'
import { wordToPageArr2 } from '../utils/config'
// import axios from 'axios'
import {
    Container,
    Header,
    Title,
    Button,
    Left,
    Right,
    Body,
    Icon,
    Footer,
    FooterTab,
    Content,
} from 'native-base'
import Drawer from 'react-native-drawer'


class Test extends Component {

    constructor(props) {
        super(props)
        this.state = {
            statusBarHidden: true,
            showTool: false
        }
    }

    componentDidMount() {
        this.props.dispatch({ type: 'chapter/POST_GET' })
    }


    _showToolView = () => {
        this.setState({
            showTool: !this.state.showTool,
            statusBarHidden: !this.state.statusBarHidden
        })
    }

    _back() {
        back(null)
    }

    keyExtractor(item, index) {
        return item.texts
    }

    _onEndReached() {
    }

    handleScroll(e) {
        let x = e.nativeEvent.contentOffset.x
        if (x < 0) {
            // this.flatListRef.scrollToIndex({ animated: false, index: 1 })
        }
    }

    _renderTool() {
        if (this.state.showTool) {
            return (
                <Header
                    style={{ backgroundColor: 'rgba(0, 0, 0, 0.8)' }}
                    iosBarStyle={'light-content'}>
                    <Left>
                        <Button transparent onPress={this._back}>
                            <Icon ios="ios-arrow-back-outline" android="md-arrow-back" style={{ color: 'white' }} />
                        </Button>
                    </Left>
                    <Body />
                    <Right>
                        <Button transparent onPress={() => { this._drawer.open() }}>
                            <Text style={styles.changeSource}>换源</Text>
                        </Button>
                    </Right>
                </Header>
            )
        } else {
            return null
        }
    }
    _renderBottom() {
        if (this.state.showTool) {
            return (
                <Footer
                    style={styles.footerContainer}>
                    {/* <FooterTab> */}
                    {/* <Button full onPress={this.handlePressLogin}>
                        <Text>Footer</Text>
                    </Button> */}
                    {/* </FooterTab> */}
                </Footer>
            )
        } else {
            return null
        }
    }

    render() {
        // const happy = wordToPageArr(this.state.chapter.content, 14);
        return (
            <Drawer
                ref={(ref) => { this._drawer = ref }}
                content={<View style={{ backgroundColor: 'rgb(45, 46, 47)' }}><Text>sdfsds</Text></View>}
                type="static"
                openDrawerOffset={100}
                tapToClose={true}
            >
                <Container style={styles.container}>
                    <StatusBar hidden={this.state.statusBarHidden} barStyle={'light-content'} />
                    {this._renderTool()}
                    <Content
                        style={styles.Listcontainer}>
                        <FlatList
                            ref={component => {
                                this.flatListRef = component
                            }}
                            data={wordToPageArr2(this.props.chapter.content, 24)}
                            renderItem={({ item }) => {
                                return (
                                    <View style={[styles.child]}>
                                        <TouchableWithoutFeedback onPress={this._showToolView}>
                                            <View style={styles.textContainer}>
                                                {item.texts ? item.texts.map((value, index) => {
                                                    return (
                                                        <Text style={styles.text} key={index}>
                                                            {value}
                                                        </Text>
                                                    )
                                                }) : null}
                                            </View>
                                        </TouchableWithoutFeedback>
                                    </View>)
                            }}
                            keyExtractor={this.keyExtractor}
                            horizontal={true}
                            pagingEnabled
                            onEndReached={this._onEndReached.bind(this)}
                            onScroll={(e) => this.handleScroll(e)}
                        />
                    </Content>
                    {this._renderBottom()}
                </Container>
            </Drawer>
        )
    }
}
const { width, height } = Dimensions.get('window')

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    },
    child: {
        height: height,
        width,
    },
    text: {
        fontSize: 24,
        lineHeight: 24 * 1.5,
        letterSpacing: 3
    },
    textContainer: {
        marginLeft: PixelRatio.roundToNearestPixel(20),
        marginRight: PixelRatio.roundToNearestPixel(15),
    },
    Listcontainer: {
        position: 'absolute',
        top: PixelRatio.roundToNearestPixel(88),
    },
    footerContainer: {
        position: 'absolute',
        bottom: 0,
        backgroundColor: 'rgb(45, 46, 47)'
    },
    changeSource: {
        fontSize: 22,
        color: 'white'
    }
})
export default connect(state => state)(Test)
